//HomeView.vue
<script setup>
  import { ref,computed, onMounted } from 'vue';
 
  import { getBarChart } from '@/api/api'
  import { useRoute } from 'vue-router'
  const route = useRoute()

  onMounted( () => {
    getInit()
  })

  const getInit = () => {
    const { params } = route
    getBarChart({
      job_id: params.id
    }).then(res => {
      data.value = res.data
    })
  } 
  
//模拟数据value的字段对应Y轴，name字段对应X轴
  const data = ref({
    x: [],
    y: []
  })
 
const option = computed(()=>{
  return{
    tooltip: {
      trigger: 'item',
      formatter:  '{b}: {c}人'
    },
    title:{
      text: '匹配度得分区域分布',
      left: 'center',
      top: 'bottom',
      textStyle: {
        fontSize: 14,
      }
    },
    xAxis: {
      type: 'category',
      data: data.value.x,
    },
    yAxis: {
      type: 'value',
      name: '单位:人',
      axisLabel: {
        formatter: '{value}'
      }
    },
    grid: {
      left: '3%',
      right: '0',
      containLabel: true
    },
    series: [
      {
        name: '',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: data.value.y
      },
      // {
      //   data: data.value.y,
      //   type: 'bar'
      // }
    ]
  }
})

</script>
 
<template>
  <e-charts class="chart" :option="option" />
</template>
 
<style>
.chart{
  height: 350px;
}
</style>